import React, { PureComponent, Suspense } from 'react';
import { connect } from 'dva';
import { Card, message } from 'antd';

import { TimelineChart } from '@/components/Charts';

/* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))
class OrderTimeLineChart extends PureComponent {
  state = {
    currentTabKey: '',
    param: {
      instrument: '',
    },
  };

  min = 0;

  // 默认加载数据-起始方法
  render() {
    const {
      rule: { timeLineChartData },
    } = this.props;

    const newtimeLineChartData = [];
    for (let i = 0; i < timeLineChartData.list.length; i++) {
      newtimeLineChartData.push({
        x: new Date(timeLineChartData.list[i].date).getTime(),
        y1: timeLineChartData.list[i].lv,
      });
    }
    return (
      <Card bordered={false}>
        {newtimeLineChartData.length === 0 ? (
          <h3 style={{ textAlign: 'center' }}>暂无数据</h3>
        ) : (
          <div>
            <TimelineChart
              tickInterval={60 * 60 * 1000 * 24 * 2}
              // 最坑的在这个地方，要在每次网络返回数据的时候重置最小值
              yMin={this.min}
              height={300}
              data={newtimeLineChartData}
              titleMap={{ y1: '近10天隐含波动率' }}
            />
          </div>
        )}
      </Card>
    );
  }

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch, instrument } = this.props;
    const { param } = this.state;
    param.instrument = instrument;

    dispatch({
      type: 'rule/GetImpliedVolatility',
      payload: param,
      callback: response => {
        if (response.list.length > 0) {
          this.min = response.list[0].lv;
        }
        for (let i = 0; i < response.list.length; i++) {
          this.min = Math.min(response.list[i].lv, this.min);
          if (this.min > response.list[i].lv) {
            this.min = response.list[i].lv;
          }
        }
      },
    });
  }
}

export default OrderTimeLineChart;
